<template>
  <div>
    <div id="gender" style="height: 380px;width: 790px;">

    </div>
  </div>
</template>

<script>
  export default {
    name: "MasterGenderChart",
    data() {
      return {
        option: {
          title: {
            text: '男女人数对比',
            show: true,
            left: 'center',
            textStyle: {
              fontSize: 18,
              color: "#fff",
              // top:10,
            }
          },
          legend: {
            right:50,
            textStyle: {
              color:'#fff',
              padding:'5px 0 0 0',
            },
            itemStyle:{
              fontSize: 16
            }
          },
          tooltip: {},
          dataset: {
            source: [
              ['title', '男', '女'],
              ['一级', 43.3, 85.8],
              ['二级', 83.1, 73.4],
              ['三级', 86.4, 65.2],
              ['四级', 72.4, 53.9]
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {},
          series: [{type: 'bar'}, {type: 'bar'}]
        }
      }
    },
    mounted() {
      let declareChart = this.$echarts.init(document.getElementById('gender'))
      declareChart.setOption(this.option)
    }
  }
</script>

<style scoped>
  #gender {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
</style>
